import React                        from 'react';
import {Route}                      from 'react-router-dom';

var Nav = {
    qr: ()                          => '/qr',
    auth: (type)                    => `/auth/${type}`,
    cart: ()                        => '/cart',
    shop: ()                        => '/shop',
    store: ()                       => '/store',
    active: ()                      => '/active',
    voucher: ()                     => '/voucher',
    records: ()                     => `${Nav.cart()}/records`,
    cartList: ()                    => `${Nav.cart()}/list`,
    cartItem: ()                    => `${Nav.cart()}/item`,
    activeEdit: id                  => `/activeEdit/${id}`,
    accumulate: ()                  => '/accumulate',
    accumulateList: ()              => '/accumulateList',
};

const RouteWithSubRoutes = ({path, routes, component: Component, ...others}) => (
    <Route
        {...others}
        path={path}
        render={props => (
            // pass the sub-routes down to keep nesting
            <Component {...props} routes={routes} />
        )}
    />
);

export const subRoutes = (routes) => routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />);

export default Nav;
